<style lang="less">
@import './home.less';
@import '../../styles/common.less';
</style>
<template>
  <div class="home-main">
     <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color"  :size="36" :id-name="`infor-${i}`" :lostNum="infor.lostNum" :end-val="infor.count" :introText="infor.title" >
        </infor-card>
      </i-col>
      <Col :md="24" :lg="24">
                <Row :gutter="5">
                    <Col :md="24" :lg="12" :style="{marginBottom: '10px'}">
                        <Card>
                            <div class="data-lineAdd-row">
                                <lineAdd></lineAdd>
                            </div>
                        </Card>
                    </Col>
                    <Col :md="24" :lg="8" :style="{marginBottom: '10px'}">
                        <Card>
                            <div class="data-source-row">
                                <user-flow></user-flow>
                            </div>
                        </Card>
                    </Col>
                    <!-- <Col :md="24" :lg="4" :style="{marginBottom: '10px'}">
                        <Card>
                            <div class="data-source-row">
                                <data-source-pie></data-source-pie>
                            </div>
                        </Card>
                    </Col> -->
                </Row>
            </Col>
    </Row>
  </div>
</template>

<script>
import cityData from './map-data/get-city-value.js'
import homeMap from './components/map.vue'
import lineAdd from './components/lineAdd.vue'
import visiteVolume from './components/visiteVolume.vue'
import serviceRequests from './components/serviceRequests.vue'
import userFlow from './components/dashBoard.vue'
import mapDataTable from './components/mapDataTable.vue'
import toDoListItem from './components/toDoListItem.vue'
import inforCard from './components/inforCard'
import gcDustbinApi from '@/api/ckMachineCenter/MCmanagement.js'
export default {
  name: 'home',
  components: {
    inforCard,
    userFlow,
    lineAdd
  },
  data () {
    return {
      inforCardData: [
        { title: '总设备', icon: 'md-person-add', count: 0, lostNum: 1, color: '#2d8cf0' },
        { title: '回收箱', icon: 'md-locate', count: 0, lostNum: 0, color: '#19be6b' },
        { title: '分类箱', icon: 'md-help-circle', count: 0, lostNum: 2, color: '#ff9900' },
        { title: '发放机', icon: 'md-share', count: 0, lostNum: 4, color: '#ed3f14' }
      ]
    }
  },
  computed: {
    avatorPath () {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    getJQCount () {
      const that = this
      gcDustbinApi.getCount().then(res => {
        console.log(res)
        that.inforCardData[0].count = res.data.count
        that.inforCardData[1].count = res.data.hscount
        that.inforCardData[2].count = res.data.flcount
        that.inforCardData[3].count = res.data.fdjCount
      })
    }
  },
  created () {
    this.getJQCount()
  }
}
</script>
